<template>
	<view class="l-barrage">
		<block v-for="(item,index) in items" :key="index">
			<!-- #ifdef H5 -->
				<view class="body">
					<view class="box">
						<text v-if="item.display" class="aon"
						  :style="{top: `${item.top}%`,color: item.color}"
						>
							{{item.text}}
						</text>
					</view>
				</view>
			<!-- #endif -->
			
			<!-- #ifndef H5 -->
				<view class="body">
					<view class="box">
						<text v-if="item.display" class="aon"
						  :style="{top: `${item.top}%`,color: item.color,
						  animation: `mymove ${Number(item.time)}s linear forwards`
						  }"
						>
							{{item.text}}
						</text>
					</view>
				</view>
			<!-- #endif -->
			
		</block>
	</view>
</template>

<script>
let cycle;

// 弹幕字体颜色
function getRandomColor() {
  let rgb = []
  for (let i = 0; i < 3; ++i) {
	let color = Math.floor(Math.random() * 256).toString(16)
	color = color.length == 1 ? '0' + color : color
	rgb.push(color)
  }
  // return '#' + rgb.join('')
return '#000'
}	

export default {
	name: 'l-barrage',
	props: {
		minTime: {
			type: Number,
			default: 4
		},
		maxTime: {
			type: Number,
			default: 9
		},
		minTop: {
			type: Number,
			default: 0
		},
		maxTop: {
			type: Number,
			default: 40
		}
	},
	data() {
		return {
			items: [],
		}
	},
	methods: {
		add(text = '',time = Math.ceil(Math.floor(Math.random()*(this.maxTime-this.minTime+1)+this.minTime))) {
			this.items.push({
				text,
				time,
				top: Math.ceil(Math.random()*(this.maxTop-this.minTop+1)+this.minTop),
				color: getRandomColor(),
				display: 1,
			});
		},
		start(items = []) {
			console.log('1111',items);
			this.items = [];
			cycle && (clearInterval(cycle));
			let i = 0,len = items.length;
			
			cycle = setInterval(()=> {
				let time = 5;
				// #ifndef H5
					time = Math.ceil(Math.floor(Math.random()*(this.maxTime-this.minTime+1)+this.minTime));
				// #endif
				
				if (i < len) {
					this.add(items[i],time);
					i++;
				}
				else {
					clearInterval(cycle);
					setTimeout(()=>{
						this.$emit("end",{});
					},time * 1000)
				}
			}, 500)
		}
	}
}	
	
</script>

<style>
	 .body {
	        width: 300rpx;
	       
	        display: flex; /* 关键外盒子要是flex才能随着内容显示省略号； */
	    }
		 .box {
		        min-width: 0;   /* 必写的关键； */
		     
		        background: pink;
		    }
.aon{
max-width: 70%;
overflow: hidden;
 font-size: 28rpx;
 text-align: center;
white-space: nowrap; 
text-overflow: ellipsis;
border: 2rpx solid #8fd3f8;
position: absolute;
white-space:nowrap;
background-color: rgba(255, 255, 255, .8);
padding: 10rpx 20rpx;
border-radius: 30rpx;
animation: mymove 5s linear forwards;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-fill-mode: forwards;
}
.l-barrage{
  z-index: 3;
  width: 100%;
  height: 100%;
  position: relative;
}

@keyframes mymove
{
from{left: 100%;}
  to{left: -200%;}
}

@-moz-keyframes mymove /* Firefox */
{
from{left: 100%;}
  to{left: -200%;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from{left: 100%;}
  to{left: -200%;}
}

@-o-keyframes mymove /* Opera */
{
from{left: 100%;}
  to{left: -200%;}
}
</style>
